/**
 * 文件功能：API使用示例组件
 * 作者：开发者
 * 日期：2024年
 * 描述：展示如何在React组件中使用API管理功能
 */

import React, { useState } from 'react';
import ApiService from '../api';
import { useApi, useLogin, useFileUpload, usePagination } from '../api/hooks';

/**
 * API使用示例组件
 * @description 展示各种API使用方式的示例
 */
const ApiExample = () => {
  const [userId, setUserId] = useState('1');
  const [loginForm, setLoginForm] = useState({ username: '', password: '' });
  const [selectedFile, setSelectedFile] = useState(null);

  // 使用useApi Hook获取用户信息
  const {
    data: userInfo,
    loading: userLoading,
    error: userError,
    refetch: refetchUser,
  } = useApi(
    () => ApiService.user.getUserInfo(userId),
    [userId], // 当userId变化时重新请求
    false // 不立即执行
  );

  // 使用登录Hook
  const { login, logout, loading: loginLoading, error: loginError } = useLogin();

  // 使用文件上传Hook
  const { upload, uploading, progress, error: uploadError } = useFileUpload();

  // 使用分页Hook
  const {
    data: fileList,
    loading: listLoading,
    pagination,
    onChange: onPageChange,
    refresh: refreshList,
  } = usePagination(ApiService.file.getList, { current: 1, pageSize: 5 });

  /**
   * 处理登录表单提交
   * @param {Event} e - 表单提交事件
   */
  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const result = await login(loginForm);
      console.log('登录成功:', result);
      alert('登录成功!');
    } catch (error) {
      console.error('登录失败:', error);
    }
  };

  /**
   * 处理文件选择
   * @param {Event} e - 文件选择事件
   */
  const handleFileSelect = (e) => {
    setSelectedFile(e.target.files[0]);
  };

  /**
   * 处理文件上传
   */
  const handleFileUpload = async () => {
    if (!selectedFile) {
      alert('请选择文件');
      return;
    }

    try {
      const result = await upload(selectedFile);
      console.log('上传成功:', result);
      alert('上传成功!');
      refreshList(); // 刷新文件列表
    } catch (error) {
      console.error('上传失败:', error);
    }
  };

  /**
   * 直接使用API服务的示例
   */
  const handleDirectApiCall = async () => {
    try {
      // 直接调用API服务
      const result = await ApiService.common.get('/test/endpoint');
      console.log('API调用结果:', result);
    } catch (error) {
      console.error('API调用失败:', error);
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>API使用示例</h1>

      {/* 用户信息获取示例 */}
      <section style={{ marginBottom: '30px', padding: '15px', border: '1px solid #ddd' }}>
        <h2>1. 获取用户信息示例</h2>
        <div>
          <label>
            用户ID: 
            <input
              type="text"
              value={userId}
              onChange={(e) => setUserId(e.target.value)}
              style={{ marginLeft: '10px', padding: '5px' }}
            />
          </label>
          <button
            onClick={refetchUser}
            disabled={userLoading}
            style={{ marginLeft: '10px', padding: '5px 10px' }}
          >
            {userLoading ? '加载中...' : '获取用户信息'}
          </button>
        </div>
        {userError && <p style={{ color: 'red' }}>错误: {userError}</p>}
        {userInfo && (
          <pre style={{ background: '#f5f5f5', padding: '10px', marginTop: '10px' }}>
            {JSON.stringify(userInfo, null, 2)}
          </pre>
        )}
      </section>

      {/* 用户登录示例 */}
      <section style={{ marginBottom: '30px', padding: '15px', border: '1px solid #ddd' }}>
        <h2>2. 用户登录示例</h2>
        <form onSubmit={handleLogin}>
          <div style={{ marginBottom: '10px' }}>
            <label>
              用户名: 
              <input
                type="text"
                value={loginForm.username}
                onChange={(e) => setLoginForm({ ...loginForm, username: e.target.value })}
                style={{ marginLeft: '10px', padding: '5px' }}
              />
            </label>
          </div>
          <div style={{ marginBottom: '10px' }}>
            <label>
              密码: 
              <input
                type="password"
                value={loginForm.password}
                onChange={(e) => setLoginForm({ ...loginForm, password: e.target.value })}
                style={{ marginLeft: '10px', padding: '5px' }}
              />
            </label>
          </div>
          <button
            type="submit"
            disabled={loginLoading}
            style={{ padding: '5px 10px', marginRight: '10px' }}
          >
            {loginLoading ? '登录中...' : '登录'}
          </button>
          <button
            type="button"
            onClick={logout}
            style={{ padding: '5px 10px' }}
          >
            登出
          </button>
        </form>
        {loginError && <p style={{ color: 'red' }}>错误: {loginError}</p>}
      </section>

      {/* 文件上传示例 */}
      <section style={{ marginBottom: '30px', padding: '15px', border: '1px solid #ddd' }}>
        <h2>3. 文件上传示例</h2>
        <div>
          <input
            type="file"
            onChange={handleFileSelect}
            style={{ marginBottom: '10px' }}
          />
          <br />
          <button
            onClick={handleFileUpload}
            disabled={uploading || !selectedFile}
            style={{ padding: '5px 10px' }}
          >
            {uploading ? `上传中... ${progress}%` : '上传文件'}
          </button>
        </div>
        {uploadError && <p style={{ color: 'red' }}>错误: {uploadError}</p>}
      </section>

      {/* 分页列表示例 */}
      <section style={{ marginBottom: '30px', padding: '15px', border: '1px solid #ddd' }}>
        <h2>4. 分页列表示例</h2>
        <button
          onClick={refreshList}
          disabled={listLoading}
          style={{ padding: '5px 10px', marginBottom: '10px' }}
        >
          {listLoading ? '加载中...' : '刷新列表'}
        </button>
        
        {fileList.length > 0 ? (
          <div>
            <ul>
              {fileList.map((file, index) => (
                <li key={index} style={{ marginBottom: '5px' }}>
                  {JSON.stringify(file)}
                </li>
              ))}
            </ul>
            <div style={{ marginTop: '10px' }}>
              <span>第 {pagination.current} 页，共 {Math.ceil(pagination.total / pagination.pageSize)} 页</span>
              <button
                onClick={() => onPageChange(pagination.current - 1)}
                disabled={pagination.current <= 1}
                style={{ marginLeft: '10px', padding: '2px 8px' }}
              >
                上一页
              </button>
              <button
                onClick={() => onPageChange(pagination.current + 1)}
                disabled={pagination.current >= Math.ceil(pagination.total / pagination.pageSize)}
                style={{ marginLeft: '5px', padding: '2px 8px' }}
              >
                下一页
              </button>
            </div>
          </div>
        ) : (
          <p>暂无数据</p>
        )}
      </section>

      {/* 直接API调用示例 */}
      <section style={{ marginBottom: '30px', padding: '15px', border: '1px solid #ddd' }}>
        <h2>5. 直接API调用示例</h2>
        <button
          onClick={handleDirectApiCall}
          style={{ padding: '5px 10px' }}
        >
          调用测试接口
        </button>
        <pre style={{ background: '#f5f5f5', padding: '10px', marginTop: '10px' }}>
{`// 直接使用API服务
const result = await ApiService.common.get('/test/endpoint');

// 或者使用具体的接口
const userInfo = await ApiService.user.getUserInfo('123');
const uploadResult = await ApiService.file.upload(formData);`}
        </pre>
      </section>
    </div>
  );
};

export default ApiExample;